<template>
    <a-form ref="formRef" :model="formData" layout="vertical">
              <a-form-item label="节点ID" name="id">
                  {{ formData.id }}
              </a-form-item>
              <a-form-item label="标题">
                  <a-input v-model:value="formData.title" @change="onChange"/>
              </a-form-item>
              <a-form-item label="元数据">
                <MetaInputField v-model:value="formData.meta" @change="onChange" />
              </a-form-item>
          </a-form>
  </template>
  <script setup>
  import { ref,reactive, nextTick,watch } from 'vue'
  import MetaInputField from "@/components/CodeEditor/MetaInputField.vue";
  
  const emit = defineEmits(['change'])
  const formRef = ref(null)
  let formData = reactive({ id: null, title: null, task: null, when: null,meta:null})
  
  let _currentEditNode = null // 当前编辑的节点
  
  function resetFields() {
      formRef.value.resetFields()
  }
  
  function onShow(currentEditNode){
      _currentEditNode = currentEditNode
      formData.id = _currentEditNode.id
      const data = _currentEditNode.getData()
      if(data){
          formData.id = data.id
          formData.title = data.title || ''
          formData.task = data.task || ''
          formData.when = data.when || ''
          formData.meta = data.meta || {}
          onChange()
      }
  }
  
  function onChange() {
      _currentEditNode.setData({ id:formData.id,title: formData.title, task: formData.task, when: formData.when,meta:formData.meta },{
        overwrite:true
      })
      _currentEditNode.emit("node:data:changed",{})
      emit('change',formData)
  }
  
  defineExpose({
      resetFields,
      onShow
  })
  </script>